<script setup lang="ts">
import LanguageSwitcher from './LanguageSwitcher.vue'

import { ref, computed } from 'vue'
//import { useI18n } from 'vue-i18n';
import { useI18n } from 'vue-i18n'
import { ElConfigProvider } from 'element-plus'
// import zhLocale from 'element-plus/lib/locale/lang/zh-cn';
// import enLocale from 'element-plus/lib/locale/lang/en';

import enLocale from 'element-plus/es/locale/lang/en'
import zhLocale from 'element-plus/es/locale/lang/zh-cn'

const { t, locale } = useI18n()
const date = ref('')
//const language = ref('zh-cn')
// 根据当前语言设置 Element Plus 的 locale
const currentLocale = computed(() => {
    console.log(locale)
    //language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
    return locale.value === 'zh' ? zhLocale : enLocale
})

//const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))

const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
    }
]
</script>
<template>
    <LanguageSwitcher />
    <el-config-provider :locale="currentLocale">
        <div>
            <h1>{{ t('hello') }}</h1>
            <p>{{ t('welcome') }}</p>
            <el-date-picker
                v-model="date"
                type="date"
                :placeholder="t('selectDate')"
            ></el-date-picker>
            <div>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column
                        prop="date"
                        :label="t('Date')"
                        width="180"
                    />
                    <el-table-column
                        prop="name"
                        :label="t('Name')"
                        width="180"
                    />
                    <el-table-column prop="address" :label="t('Address')" />
                </el-table>
                <el-pagination :total="100" />
            </div>
        </div>
    </el-config-provider>
</template>
